<template>
  <div class="ordertk">
    <ContentBox title="申请退款" @right="send" :fixed="true" titlecolor="#000000">
      <template slot="oleft"><van-icon color="#000000" name="arrow-left"/></template>
      <template slot="oright">提交</template>
    </ContentBox>
    <van-field
      readonly
      clickable
      label="退款原因"
      :value="tkreason"
      placeholder="选择原因"
      @click="showPicker = true"
    />
    <van-field v-model="refund_reason_wap_explain" placeholder="请输入详细的退款说明" rows="4" type="textarea" autosize :clearable="true" :show-word-limit="true" maxlength="250"/>
    <van-uploader class="fileupload" v-model="fileList" :after-read="afterRead" :multiple="true" :preview-image="true"/>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="tkList"
        @cancel="showPicker = false"
        @confirm="setReason"
      />
    </van-popup>
    <van-overlay :show="show" class="loading">
      <van-loading size="2.4rem" :vertical="true"></van-loading>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tkList: [],
      tkreason: '',
      showPicker: false,
      refund_reason_wap_explain: '',
      show: false,
      fileList: [],
      refund_reason_wap_img: ''
    }
  },
  methods: {
    getTKList () {
      this.$axios.get('/api/order/refund/reason').then(res => {
        if (res.status === 200) {
          this.tkList = res.data
        }
      })
    },
    send () {
      if (this.tkreason === '') {
        this.$toast('请选择退款原因')
        return false
      }
      this.$axios.post('/api/order/refund/verify', {
        text: this.tkreason,
        refund_reason_wap_img: this.refund_reason_wap_img,
        refund_reason_wap_explain: this.refund_reason_wap_explain,
        uni: this.$route.params.oid
      }).then(res => {
        if (res.status === 200) {
          this.$toast('已发起退款')
          this.$router.replace('/shopOrder?showView=5')
        }
      })
    },
    setReason (value) {
      this.tkreason = value
      this.showPicker = false
    },
    afterRead () {
      this.show = true
      this.$upload(this.fileList).then(res => {
        this.refund_reason_wap_img = res.join(',')
        this.show = false
      }).catch(_ => {
        this.show = false
      })
    }
  },
  created () {
    this.getTKList()
  }
}
</script>

<style lang="scss">
.ordertk{
  height: 100%;
  background: #f0f0f0;
  padding-top: .88rem;
  .fileupload{
    padding: .2rem;
  }
  .loading{
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 101 !important;
    .van-loading__text{
      font-size: .36rem;
      font-weight: bold;
    }
  }
}
</style>
